import { Component, OnInit } from '@angular/core';
import { ThreeLibsService } from 'src/app/core/service/three-libs.service';
import { BaselineService } from 'src/app/core/service/baseline.service';


@Component({
  selector: 'app-baseline-list',
  templateUrl: './baseline-list.component.html',
  styleUrls: ['./baseline-list.component.scss']
})
export class BaselineListComponent implements OnInit {

  // 定义变量
  radioValue = '通过';
  isVisibleTop = false;
  isVisibleMiddle = false;
  selectedValue = '所有类型';
  allChecked = false;
  indeterminate = false;
  displayData = [];

  pageIndex = 1;      // 页码标识
  pageSize = 10;      // 每页展示多少数据 —— 10条
  total = 1;          // 总共1页
  dataSet = [];       // 数据集合
  loading = true;     // 加载
  sortValue = null;   // 种类值
  sortKey = null;     // 种类关键值


  filterGender = [
    { text: 'male', value: 'male' },
    { text: 'female', value: 'female' }
  ];
  searchGenderList: string[] = [];

  singleValue = 'a10';
  listOfOption: Array<{ label: string, value: string }> = [];
  listOfTagOptions = [];

  datas = [
    {
      name: 'Projects(total)',
      age: 32,
    },
    {
      name: 'Vulnerable Projects',
      age: 42,
    },
    {
      name: 'Dependencies(total)',
      age: 32,
    }
  ];
  barOption = {
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      { type: 'bar' },
      { type: 'bar' },
      { type: 'bar' }
    ]
  };

  lineOption = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['mysql', 'Tomcat', 'linux', 'JDBC', 'MAC']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'mysql',
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Tomcat',
        type: 'line',
        stack: '总量',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'linux',
        type: 'line',
        stack: '总量',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'JDBC',
        type: 'line',
        stack: '总量',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'MAC',
        type: 'line',
        stack: '总量',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };

  pieOption = {
    series: [
      {
        name: '资产信息',
        type: 'pie',
        radius: '55%',
        data: [
          { value: 235, name: 'mysql' },
          { value: 274, name: 'Tomcat' },
          { value: 310, name: 'linux' },
          { value: 335, name: 'JDBC' },
          { value: 400, name: 'MAC' }
        ]
      }
    ]
  };


  chartOption = {
    title: {
      text: '堆叠区域图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['mysql', 'Tomcat', 'linux', 'JDBC', 'MAC']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'mysql',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Tomcat',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'linux',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'JDBC',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'MAC',
        type: 'line',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        areaStyle: { normal: {} },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  // 矩形树
  treeOption = {
    tooltip: {},
    series: [
      {
        name: 'Disk Usage',
        type: 'treemap',
        visibleMin: 300,
        upperLabel: {
          normal: {
            show: true,
            height: 30,
            color: '#00edff'
          }
        },
        itemStyle: {
          normal: {
            borderColor: '#0165dd'
          },
          emphasis: {
            color: '#0165dd',
            strokeColor: 'yellow',
            strokeWidth: 2
          }
        },
        levels: [
          {
            color: ['#0165dd'], // default color
            itemStyle: {
              normal: {
                borderWidth: 5,
                gapWidth: 3
              },
              emphasis: {
                borderColor: '#0165dd'
              }
            },
          },
          {
            color: [
              '#0165dd', '#035bd7',
              '#035bd7', '#1d90fb', '#023bc8',
              '#013cc6', '#021e81'
            ],
            colorMappingBy: 'value',
            itemStyle: {
              normal: {
                borderColor: '#0844be',
                borderWidth: 5,
                gapWidth: 3
              },
              emphasis: {
                borderColor: '#0165dd'
              }
            }
          },
          {
            colorSaturation: [0.35, 0.5],
            itemStyle: {
              normal: {
                borderWidth: 5,
                gapWidth: 3,
                borderColorSaturation: 0.6
              }
            }
          }
        ],
        data: []
      }
    ]
  };

  gaugeOption = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

  data = [
    {
      title: '基线名称',
      content: 'JBoss目录列表安全基线'
    },
    {
      title: '基线编号',
      content: 'BSM-JSFJKDS-7899-9090'
    },
    {
      title: '基线项说明',
      content: '禁止MIJI列表显示文件'
    },
    {
      title: '检测步骤',
      content: '第一步...第二步'
    },
    {
      title: '判定依据',
      content: '判定条件、检测操作'
    },
    {
      title: '备注',
      content: '....'
    }
  ];

  sort(sort: { key: string, value: string }): void {
    this.sortKey = sort.key;
    this.sortValue = sort.value;
    this.searchData();
  }

  constructor(
    private threelibsservice: ThreeLibsService,
    private baselineService: BaselineService
  ) { }

  /**
   * 搜索数据
   * @param reset 重置
   */
  searchData(reset: boolean = false): void {
    if (reset) {
      this.pageIndex = 1;
    }
    this.loading = true;
    this.threelibsservice.getUsers(this.pageIndex, this.pageSize, this.sortKey, this.sortValue,
      this.searchGenderList).subscribe((data: any) => {
        this.loading = false;
        this.total = 200;
        this.dataSet = data.results;
      });
  }

  /**
   * @param reset 获取数据
   */
  getBaselinePage(reset: boolean = false): void {
    console.log('安全基线.显示数据===》');
    this.baselineService.getBaselinePage().subscribe(
      (baselinePage) => {
        console.log(baselinePage, '<--- baselinePage');
        /* for (let i = 0; i < containerPage.data.length; i++) {
          if (containerPage.data[i].appList.length === 0) {
            containerPage.data[i].appList.push(
              {
                appUuid: '',
                name: '暂无应用'
              });
            console.log(typeof containerPage.data[i].appList);
          }
          if (containerPage.data[i].releaseDate === null || containerPage.data[i].releaseDate === '') {
            containerPage.data[i].releaseDate = '暂无记录';
            console.log('Janine', typeof containerPage.data[i].releaseDate);
            console.log('Janine', containerPage.data[i].releaseDate.replace(null, '暂无记录'));
          }
        } */
        this.dataSet = baselinePage.data;
        this.total = baselinePage.total;
        console.log('Janine.getData', this.dataSet);
      }
    );
  }



  updateFilter(value: string[]): void {
    this.searchGenderList = value;
    this.searchData(true);
  }

  currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
    this.displayData = $event;
    this.refreshStatus();
  }


  /**
   * 刷新状态
   */
  refreshStatus(): void {
    const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
  }

  /**
   * 全选方法
   */
  checkAll(value: boolean): void {
    this.displayData.forEach(data => {
      if (!data.disabled) {
        data.checked = value;
      }
    });
    // 刷新状态
    this.refreshStatus();
  }

  // 对话框
  showModalMiddle(): void {
    this.isVisibleMiddle = true;
  }

  handleOkMiddle(): void {
    console.log('click ok');
    this.isVisibleMiddle = false;
  }

  handleCancelMiddle(): void {
    this.isVisibleMiddle = false;
  }
  // 对话框

  ngOnInit(): void {
    // this.searchData();
    this.getBaselinePage();
    const children: Array<{ label: string, value: string }> = [];
    for (let i = 10; i < 36; i++) {
      children.push({ label: i.toString(36) + i, value: i.toString(36) + i });
    }
    this.listOfOption = children;
  }

}
